import { Button, ColorPicker, DatePicker, Flex, Typography } from "antd";
import { useSettingsStore } from "@/stores/settings";
import { Link } from "react-router-dom";

const { RangePicker } = DatePicker;

export default function LandingPage() {
  const colorPrimary = useSettingsStore((state) => state.colorPrimary);
  const setColorPrimary = useSettingsStore((state) => state.setColorPrimary);

  return (
    <div>
      <Typography.Title level={3}>Landing Page</Typography.Title>
      <Flex gap={16}>
        <Link to="/user">
          <Button type="primary">user</Button>
        </Link>
        <RangePicker />
        <ColorPicker
          showText
          value={colorPrimary}
          onChange={(color) => {
            setColorPrimary(color.toHex());
          }}
        />
      </Flex>
    </div>
  );
}
